<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>CARBON</title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="myCanvas"
        style="background-color: #f7f7fb;margin: 0 auto;display: block;">
</canvas>
<div class="user-blood-border">
    <div id="userBlood"></div>
</div>
<div id="blood-box">
    <div class="blood-border">
        <div id="blood"></div>
        <div id="bloodNumber">20/20</div>
    </div>

    <div class="grade-box">
        <div class="grade-text">Lv.<span id="grade">0</span></div>
        <div class="exp-border">
            <div id="exp"></div>
        </div>
    </div>
    <div class="infoBox">
        <div class="info">Score: <span id="score"></span></div>
        <div class="info">Gun: <span id="gun"></span></div>
        <div class="info">Guard: <span id="guard"></span></div>
        <div class="info">Damage: <span id="damage">0</span>%</div>
        <div class="info">Life Steal: <span id="lifeSteal">0</span>%</div>
        <div class="info">Crit Chance: <span id="critChance">0</span>%</div>
        <div class="info">Dodge: <span id="dodge">0</span>%</div>
        <div class="info">Speed: <span id="speed">0</span>%</div>
        <div class="info">Attack Speed: <span id="attackSpeed">0</span>%</div>
        <div class="info">Knockback: <span id="knockBack">0</span></div>
        <div class="info">Bounce: <span id="bounce">0</span></div>
        <div class="info">Pierce: <span id="pierce">0</span></div>
        <div class="info">Attack Range: <span id="attackRange">0</span>%</div>
        <div class="info">Pickup Range: <span id="pickupRange">0</span>%</div>
    </div>

</div>
<div id="buff-box">
    <div id="speedBuffBox">
        <div class="buff-item">
            <div class="buff-label">
                Speed
                <svg t="1752405905754" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="7707" width="20" height="20">
                    <path d="M797.147 728.381a19.707 19.707 0 0 1-5.976 13.397l-28.291 28.294a18.53 18.53 0 0 1-13.252 5.707c-5.15-0.214-9.86-2.462-13.274-5.977L512.037 545.488 287.452 770.073c-3.438 3.438-8.558 5.705-13.129 5.705s-9.728-2.304-13.129-5.705l-28.562-28.562c-3.438-3.438-5.705-8.558-5.705-13.129s2.304-9.728 5.705-13.129l266.277-266.277c3.438-3.438 8.558-5.705 13.129-5.705s9.728 2.304 13.129 5.705l266.277 266.277a19.534 19.534 0 0 1 5.714 13.465z m0-219.429a19.707 19.707 0 0 1-5.976 13.397l-28.291 28.294a18.53 18.53 0 0 1-13.252 5.707c-5.15-0.214-9.86-2.462-13.274-5.977L512.037 326.059 287.452 550.644c-3.438 3.438-8.558 5.705-13.129 5.705s-9.728-2.304-13.129-5.705l-28.562-28.562c-3.438-3.438-5.705-8.558-5.705-13.129s2.304-9.728 5.705-13.129l266.277-266.277c3.438-3.438 8.558-5.705 13.129-5.705s9.728 2.304 13.129 5.705l266.277 266.277a19.534 19.534 0 0 1 5.714 13.465z"
                          fill="#00FFFF" p-id="7708"></path>
                </svg>
            </div>
            <div class="buff-border">
                <div class="buff-content" id="speedBuff"></div>
            </div>
        </div>
    </div>
    <div id="attackSpeedBuffBox">
        <div class="buff-item">
            <div class="buff-label">
                Attack Speed
                <svg t="1752405905754" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="7707" width="20" height="20">
                    <path d="M797.147 728.381a19.707 19.707 0 0 1-5.976 13.397l-28.291 28.294a18.53 18.53 0 0 1-13.252 5.707c-5.15-0.214-9.86-2.462-13.274-5.977L512.037 545.488 287.452 770.073c-3.438 3.438-8.558 5.705-13.129 5.705s-9.728-2.304-13.129-5.705l-28.562-28.562c-3.438-3.438-5.705-8.558-5.705-13.129s2.304-9.728 5.705-13.129l266.277-266.277c3.438-3.438 8.558-5.705 13.129-5.705s9.728 2.304 13.129 5.705l266.277 266.277a19.534 19.534 0 0 1 5.714 13.465z m0-219.429a19.707 19.707 0 0 1-5.976 13.397l-28.291 28.294a18.53 18.53 0 0 1-13.252 5.707c-5.15-0.214-9.86-2.462-13.274-5.977L512.037 326.059 287.452 550.644c-3.438 3.438-8.558 5.705-13.129 5.705s-9.728-2.304-13.129-5.705l-28.562-28.562c-3.438-3.438-5.705-8.558-5.705-13.129s2.304-9.728 5.705-13.129l266.277-266.277c3.438-3.438 8.558-5.705 13.129-5.705s9.728 2.304 13.129 5.705l266.277 266.277a19.534 19.534 0 0 1 5.714 13.465z"
                          fill="#FF8000" p-id="7708"></path>
                </svg>
            </div>
            <div class="buff-border">
                <div class="buff-content" id="attackSpeedBuff"></div>
            </div>
        </div>
    </div>
    <div id="pickupRangeBuffBox">
        <div class="buff-item">
            <div class="buff-label">
                Pickup Range
                <svg t="1752405905754" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="7707" width="20" height="20">
                    <path d="M797.147 728.381a19.707 19.707 0 0 1-5.976 13.397l-28.291 28.294a18.53 18.53 0 0 1-13.252 5.707c-5.15-0.214-9.86-2.462-13.274-5.977L512.037 545.488 287.452 770.073c-3.438 3.438-8.558 5.705-13.129 5.705s-9.728-2.304-13.129-5.705l-28.562-28.562c-3.438-3.438-5.705-8.558-5.705-13.129s2.304-9.728 5.705-13.129l266.277-266.277c3.438-3.438 8.558-5.705 13.129-5.705s9.728 2.304 13.129 5.705l266.277 266.277a19.534 19.534 0 0 1 5.714 13.465z m0-219.429a19.707 19.707 0 0 1-5.976 13.397l-28.291 28.294a18.53 18.53 0 0 1-13.252 5.707c-5.15-0.214-9.86-2.462-13.274-5.977L512.037 326.059 287.452 550.644c-3.438 3.438-8.558 5.705-13.129 5.705s-9.728-2.304-13.129-5.705l-28.562-28.562c-3.438-3.438-5.705-8.558-5.705-13.129s2.304-9.728 5.705-13.129l266.277-266.277c3.438-3.438 8.558-5.705 13.129-5.705s9.728 2.304 13.129 5.705l266.277 266.277a19.534 19.534 0 0 1 5.714 13.465z"
                          fill="#7FFF00" p-id="7708"></path>
                </svg>
            </div>
            <div class="buff-border">
                <div class="buff-content" id="pickupRangeBuff"></div>
            </div>
        </div>
    </div>
</div>
<div id="fps">FPS: 0</div>
<div class="pause-box">
    <svg onclick="changeGameState(2)" t="1746767476943" class="icon pause-icon" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         p-id="2791" width="36" height="36">
        <path d="M716.805057 780.798397V243.199797c0-21.204979-17.196985-38.40377-38.40377-38.403771s-38.401964 17.196985-38.401964 38.403771v537.5986c0 21.204979 17.196985 38.392933 38.401964 38.392933s38.40377-17.187954 38.40377-38.392933zM384.000677 780.798397V243.199797c0-21.204979-17.187954-38.40377-38.391127-38.403771-21.215816 0-38.40377 17.196985-38.40377 38.403771v537.5986c0 21.204979 17.187954 38.392933 38.40377 38.392933 21.203173 0 38.391127-17.187954 38.391127-38.392933z"
              fill="#231815" p-id="2792"></path>
    </svg>
    <svg t="1746768143982" class="icon play-icon" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg" p-id="886" width="36" height="36">
        <path d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
              fill="#040000" p-id="887"></path>
    </svg>
</div>
<div id="mask"></div>
<div id="popup">
    <div class="popup-content">
        <div class="popup-start">Welcome to Carbon Game</div>
        <div class="popup-score">
            <div class="popup-end">Game Over</div>
            <div>
                Score: <span id="popupScore"></span>
            </div>
        </div>
    </div>
    <div id="popupButton" class="bottom-button" onclick="changeGameState(1)"></div>
    <div id="popupButton-restart" class="bottom-button" onclick="restartGame()">RESTART</div>
</div>
<div id="skillPopup">
    <div id="skillPopupContent" class="skill-popup-content">
    </div>
    <div id="skillPopupButton" class="bottom-button" onclick="changeGameState(1)">CONFIRM</div>
</div>
<div class="action-box" id="actionBox"></div>
<div class="action"></div>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>
<audio class="strikeAudio" src="./audio/strike.mp3"></audio>

<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>
<audio class="eatAudio" src="audio/eat.mp3"></audio>


<script src="./js/jquery-3.4.1.min.js"></script>
<!--配置-->
<script src="./js/config.js"></script>
<!--实体类-->
<script src="js/entity.js"></script>
<!--工具类-->
<script src="./js/utils.js"></script>
<!--绘制-->
<script src="./js/draw.js"></script>
<!--主方法-->
<script src="./js/index.js"></script>
<!--操控-->
<script src="js/rocker.js"></script>
</body>
</html>